<template>
	<view class="cart-container">
		<!-- 轮播图部分 -->
		<swiper class="banner-swiper" indicator-dots="{{true}}" 
				autoplay="{{true}}" interval="{{2000}}" indicator-color="rgba(255,255,255,0.6)" 
				indicator-active-color="#ffffff">
			<swiper-item v-for="item in img" :key="item.bannerid" class="swiper-item">
				<image :src="item.img" mode="widthFix" class="banner-image"/>
			</swiper-item>
		</swiper>
		
		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="item in arr" :key="item.proid">
				<image :src="item.img1" class="product-image" mode="aspectFill" />
				<view class="product-info">
					<view class="product-name">{{item.proname}}</view>
					<view class="product-price">¥{{item.originprice}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	let arr = ref([])
	let img = ref([])
	function loadList() {
		uni.request({
			url: "http://47.94.6.186:3001/api/pro/list",
			method: 'GET',
			data:{
				count:1,
				limitNum:10
			},
			success(res) {
					console.log(res.data.data);
					arr.value = res.data.data
			}
		})
	}
	function Lbt(){
		uni.request({
			url:"http://47.94.6.186:3001/api/banner/list",
			method:'GET',
			success(res){
				console.log(res.data.data);
				img.value = res.data.data
			}
		})
	}
	loadList()
	Lbt()
</script>

<style>
.cart-container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

/* 轮播图样式 */
.banner-swiper {
	height: 400rpx;
	border-radius: 0 0 20rpx 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.banner-image {
	width: 750rpx;
	height: 100%;
}

/* 商品列表样式 */
.product-list {
	padding: 20rpx;
}

.product-item {
	display: flex;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	padding: 20rpx;
	transition: transform 0.2s;
}

.product-item:active {
	transform: scale(0.98);
}

.product-image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
	background-color: #f5f5f5;
}

.product-info {
	flex: 1;
	padding-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 16rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.product-price {
	font-size: 32rpx;
	color: #ff6700;
	font-weight: bold;
	margin-bottom: 16rpx;
}

.add-to-cart-btn {
	background-color: #ff6700;
	color: white;
	font-size: 24rpx;
	padding: 6rpx 20rpx;
	border-radius: 30rpx;
	width: 180rpx;
	text-align: center;
	line-height: 1.8;
	border: none;
}

/* 空购物车提示 */
.empty-cart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-cart-icon {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
	opacity: 0.5;
}

.empty-cart-text {
	color: #999;
	font-size: 28rpx;
}
</style>
